<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-16 11:24:24
 * @LastEditTime: 2023-06-04 17:56:41
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 代码生成
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\GenderCode\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-width="100px"
    >

      <el-form-item label="数据表：" prop="tableNameArr">
        <el-select
          v-model="temp.tableNameArr"
          placeholder="请选择数据表"
          @change="tableNameChange"
          clearable
          filterable
          multiple
        >
          <el-option
            v-for="i in tableList"
            :key="i.name"
            :label="`${i.name} ： ${i.comment}`"
            :value="i.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-tooltip
          effect="dark"
          content="适用于单表 或 多表"
          placement="top-start"
        >
          <el-button type="primary" @click="handleGenerate({
            type: 'custom'
          })">
            <el-icon><TakeawayBox /></el-icon>
            自定义生成
          </el-button>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="适用于单表"
          placement="top-start"
        >
          <el-button type="success" @click="handleGenerate({
            type: 'direct'
          })">
            <el-icon><TakeawayBox /></el-icon>
            立即生成
          </el-button>
        </el-tooltip>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
// 图标组件
import { TakeawayBox } from '@element-plus/icons-vue'
import { mapGetters } from 'vuex'

// 当前模块名称
// const MODULE_VALUE = 'SYS_GENDER_CODE'

import {
  getTables,
  genderCode
} from '@/api/SysManage/genderCode'
import { resolveBlob } from '@/utils/fs'

export default {
  name: 'SysGenderCode',
  computed: {
    ...mapGetters([
      'drawerVisible'
    ])
  },
  components: {
    TakeawayBox
  },
  data() {
    return {
      temp: {
        // 数据表名称数组 - select 多选结果
        tableNameArr: [],
        // 选择的数据表集合 - 名称 + 备注
        tableRowSet: []
      },
      rules: {
        tableNameArr: [
          { required: true, message: '请至少选择一个数据表', trigger: 'change' }
        ]
      },
      // 所有表信息
      tableList: []
    }
  },
  watch: {
  },
  created() {
    // 获取所有表信息
    this.getTables()
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 选择表名称
    tableNameChange(val) {
      this.temp.tableRowSet = []
      for (const item of this.tableList) {
        if (val.indexOf(item.name) > -1) {
          this.temp.tableRowSet.push(item)
        }
      }
    },
    // 获取所有表信息
    async getTables() {
      const res = await getTables()
      this.tableList = res.data || []
    },
    // 生成
    async handleGenerate({ type = 'custom' }) {
      this.$refs['dataForm'].validate().then(async valid => {
        // 自定义生成
        switch (type) {
          case 'custom':
            this.$store.dispatch('ShowDrawer', {
              module: 'SYS_GENDER_CODE',
              type: 'SETTINGS',
              size: '100%',
              params: {
                pageParams: this.temp.tableRowSet || []
              }
            }).then(res => {

            })
            break
          // 立即生成
          case 'direct':
            if ((this.temp.tableNameArr).length > 1) {
              this.$notify({
                title: '提示',
                message: '【立即生成】不适用于多表！',
                type: 'warning',
                duration: 2000
              })
              return
            }
            genderCode({
              tableName: this.temp.tableRowSet[0].name,
              tableComment: this.temp.tableRowSet[0].comment
            }).then(response => {
              resolveBlob(response)
              this.$notify({
                title: '成功',
                message: '生成成功',
                type: 'success',
                duration: 2000
              })
            }).catch(err => {
              err
            })
            break
        }
      }).catch(err => {
        err
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  background-color: #fff;
  padding: 20px;
}
</style>
